<{include file="top.html" }>
<!--<link rel="stylesheet" type="text/css" href="<{$preStaticUrl}>Wap/css/emoji.css?v=<{$resVersion}>"/>-->
</head>
<body>
    <div class="bgcolor"></div>
	<div class="content">
        <header><a class="left_link"></a>评论列表</header>
       <div class="praise-comment"></div>
<p class="bottom-blank"></p>
        <div class="footer" id="foot">
            <form id="commentForm">
            <input type="hidden" name="id" value="<{$id}>" />
            <input type="hidden" name="type" value="<{$type}>" />
            <input type="hidden" name="parentID" value="0" id="parentID" />
            <input type="hidden" id="nickname" value="" />
        	<textarea  name="content" placeholder="添加一条评论" id="area"></textarea>
            <!--输入框有内容的时候调用fs_btn这个类名、没有内容时候没有类名-->
            <input id="submit" type="button" value="发送" />
            </form>
        </div>
    </div>
    <{include file="signBody.html"}>
</body>
</html>
<script src="<{$preStaticUrl}>Wap/js/flexible.js?v=<{$resVersion}>"></script>
<script>
    var tmp_scroll = 0;
    var objType='<{$type}>';
    var objID='<{$id}>';
    var page=1;

    var loadGif = "<{$preStaticUrl}>Wap/images/load.gif";
    var loadMoreUri = "<{u('Comment/loadMore')}>";
    var newCommentUri = "<{u('Comment/addComment')}>";

    var flagData = true;
    var flagAjax = true;


    function commentSelect(obj){
        var $obj=$(obj);
        $("#parentID").val($obj.attr('data-id'));
        if($("#nickname").val() == $obj.attr('data-nick')){ return; }

        $("#nickname").val($obj.attr('data-nick'));
        $("#area").val($("#area").val().replace(/@(.*): /, ''));
        $("#area").val('@'+$obj.attr('data-nick')+': '+$("#area").val());
    }
    function changeBtnColor(){
        var content=$("#area").val()
        if(content == null || content == "" ){
            $("#submit").css("background","");
        }else{
            $("#submit").css("background","#37cbbb");
            if($("#parentID").val()>0){
                var nickname='@'+$("#nickname").val()+':';
                if(content.substr(0,nickname.length) == nickname){
                    //保持
                }else{
                    $("#area").val('');
                    $("#parentID").val(0);
                    $("#nickname").val('');
                }

            }
        }
    }


    //拖动加载
    function load_more(){
        if(! flagAjax){
            return false;
        }
        flagAjax = false;
        loadObj = load();
        $.getJSON(loadMoreUri, {page:page,type:objType,id:objID}, function(data){
            layer.close(loadObj);
            flagAjax = true;
            if(data.status!=0){
                flagData = false;
            } else {
                $(".praise-comment").append(data.dataHTML);
                fixUserHead();
                page++;
                if(data.isPage == 0){
                    flagData = false;
                }
            }
        });
    }


    $(document).ready(function(){
        load_more();
        var text = document.getElementById("area");
        autoTextarea(text);// 调用
        $('#area').on('keyup',changeBtnColor);
        $("#submit").on('click',function(){
            if($("#area").val() == null || $("#area").val() == "" ){
                return;
            }
            var data=$("#commentForm").serialize();
            $.post(newCommentUri,data,function(result){
                if(result.status == 1){
                    tip(result.msg);
                    return false;
                }else if(result.status == 99){
                    window.location.href = result.uri;
                }else {
                    //返回结果
                    $('#area').val('');
                    page = 1;
                    $(".praise-comment").empty();
                    load_more();
                    if(typeof result.tip!='undefined'){
                        tip(result.tip,{shift:5,offset:$(window).height() * 0.8});
                    }
                }
            },'json')
        });

    });

    $(window).scroll(function () {
        if (tmp_scroll == $(window).height() + $(window).scrollTop()) {
            return;
        }
        tmp_scroll = $(window).height() + $(window).scrollTop();
        var jia_scroll = $(document).height() - ($(window).height() + $(window).scrollTop());
        if (jia_scroll < 100 && flagData) {
            load_more();
        }
    });





    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                    elem.addEventListener ?
                            elem.addEventListener(type, callback, false) :
                            elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                    var val = elem.currentStyle[name];

                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                                parseFloat(getStyle('paddingTop')) -
                                parseFloat(getStyle('paddingBottom')) + 'px';
                    };

                    return val;
                } : function (name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                    padding = 0,
                    style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                document.body.scrollTop = scrollTop;
                document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

</script>